Kitty · Design System

Tokens & Components

A living test bench: it renders the real components from styles.css — what you see here is what ships. Set a brand above and assess colors and hover states in light and dark.

Test bench

Set the brand live

Everything below is derived from these values. Text on the three brand surfaces and the brand color as link text are deliberate contrast decisions. The readouts give you direct guidance for that, but they don't replace a full accessibility test.

Brand 1 (primary brand) Links, primary button, source of all tints

Brand 2 Secondary button

Complementary Callout, emphasis, icons

Text on Brand 1

Label on filled Brand 1 surfaces

Text on Brand 2

Label on filled Brand 2 surfaces

Text on Complementary

Label on filled Complementary surfaces

Tint strength of the neutrals 0.75% Brand cast in "gray" surfaces

Colored surfaces 10% Section tint, pill background, quote

Hover color shift 6% Subtle rotation toward Complementary

Links in brand color

Text on Brand 1: – Text on Brand 2: – Text on Complementary: – The live controls need JavaScript; you'll still see the defaults.

Components

Light & Dark side by side

The same components, in the light scheme on the left and the dark scheme on the right. Use mouse or keyboard to assess hover and focus states.

Light scheme

Buttons — hierarchy

Primary Secondary Ghost

Shapes · sizes · icons

Pill shape Small Large With icon

Pills / Badges

Neutral Brand soft Solid Callout Outline

Body text & link

A paragraph with a highlighted link for testing the hover highlight.

Card

Card title

Short description text on an elevated surface.

More

Form field (check focus)

Email

Signatures

Overline

01

A short quote as a signature building block.

— Source

Dark scheme

Buttons — hierarchy

Primary Secondary Ghost

Shapes · sizes · icons

Pill shape Small Large With icon

Pills / Badges

Neutral Brand soft Solid Callout Outline

Body text & link

A paragraph with a highlighted link for testing the hover highlight.

Card

Card title

Short description text on an elevated surface.

More

Form field (check focus)

Email

Signatures

Overline

01

A short quote as a signature building block.

— Source

Context

Always-dark band (.section--dark)

A permanently dark band (CTA, footer) — independent of the theme. Solid/callout pills and Primary/Secondary pop; Ghost and neutral pills switch to light edges.

Primary Secondary Ghost

Neutral Brand soft Solid Callout Outline

Token reference

Colors

Each field shows the real token as a surface — the swatches track the controls above.

Brand identity

Brand--color-brand

Brand 2--color-brand-2

Complementary--color-brand-complement

Brand strong--color-brand-strong

Brand hover--color-brand-hover

Brand 2 hover--color-brand-2-hover

Neutral surfaces

Surface--color-surface

Surface dim--color-surface-dim

Surface tint--color-surface-tint

Container--color-surface-container

Inset--color-surface-inset

Colored surfaces

Surface Brand--color-surface-brand

Surface Brand 2--color-surface-brand-2

Surface Complement--color-surface-complement

Outlines

Outline--color-outline

Outline strong--color-outline-strong

Focus--color-focus-outline · --shadow-focus

Text hierarchy (alpha)

--color-text-primaryPrimary Aa

--color-text-secondarySecondary Aa

--color-text-tertiaryTertiary Aa

--color-text-disabledDisabled Aa

--color-brand-inkBrand-Ink Aa

Token reference

Typography, spacing, radii

Font roles

Family and size are separate axes. Semantic text styles each combine a role with a step.

--font-headingHeading · Lexend

--font-bodyBody · reading text

--font-displayDisplay · button label

--font-uiUI · navigation and functional labels

--font-monoMono · --color-brand

Heading scale

--text-logokitty.

--text-h1The quick brown fox

--text-h2The quick brown fox jumps

--text-h3The quick brown fox jumps over

--text-h4The quick brown fox jumps over the lazy dog

--text-h5The quick brown fox jumps over the lazy dog

Shared text sizes

Small and Tiny follow the fluid base with their own spacing. At a 20px base they come out to 16px and 14px; minimum values protect smaller viewports.

--text-baseBase · dominant body text

--text-smallSmall · labels and short UI text

--text-tinyTiny · --technical-value

Spacing scale (8-point grid)

--space-8

--space-16

--space-24

--space-32

--space-48

--space-64

--space-96

Radius scale

--radius-4

--radius-8

--radius-12

--radius-16

--radius-24

--radius-full

--radius-small8px · compact and nested elements

--radius-control16px · buttons and form fields

--radius-container16px · cards, icon boxes and swatches

--radius-large24px · large panels, media and modals